import React, { useState } from 'react';
import { Breadcrumb, Input, Button, Form, Upload, message, Select } from 'antd';
import { useNavigate } from 'react-router-dom'
import '../../../views/Index/StaffAdd/StaffAdd.scss'

interface Props {

}

function StaffAdd(props: Props) {
    const [form] = Form.useForm();

    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/banner')
    }

    const { TextArea } = Input;


    const [fileList, setFileList] = useState([

    ]);

    const uploadButton = (
        <div>
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    return (
        <div className='staffadd'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">员工管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">新建员工信息</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>新建员工信息</p>
            </div>
            <div className="xia">
                <span>基础信息</span>
                <div className="foot">
                    <Form
                        form={form}
                    // onFinish={onFinish}
                    >
                        <Form.Item
                            name="员工姓名"
                            label="员工姓名"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                        <Form.Item
                            name="登录账号"
                            label="登录账号"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input placeholder="请输入有效手机号码" />
                        </Form.Item>
                        <div className="chuan">
                            <Form.Item
                                name="员工头像"
                                label="员工头像"
                            >
                            </Form.Item>
                            <div className="up">
                                <Upload
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                    listType="picture-card"
                                // onPreview={handlePreview}
                                // onChange={handleChange}
                                >
                                    {fileList.length >= 8 ? null : '点击上传'}
                                </Upload>
                                <p>建议尺寸640*320,小于10M的JPG、PNG格式图片</p>
                            </div>
                        </div>
                        <div className="ze">
                            <span>员工角色:</span>
                            <Select
                                defaultValue="请选择分类"
                                style={{ width: 300 }}
                            // onChange={handleChange}
                            // options={
                            //     shailist?.map((item) => ({
                            //         value: item,
                            //         label: item,
                            //     }))
                            // }
                            />
                        </div>
                        <div className="deng">
                            <Form.Item
                                name="登录密码"
                                label="登录密码"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </div>
                        <div className="some">
                            <Form.Item
                                name="微信"
                                label="微信"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                            <Form.Item
                                name="QQ"
                                label="QQ"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                            <Form.Item
                                name="邮箱"
                                label="邮箱"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </div>
                    </Form>
                </div>
                <div className="jieshao">
                    <p>员工介绍:</p>
                    <TextArea rows={4} placeholder="请输入" maxLength={1000} />
                </div>
                <div className="btn">
                    <Button type="primary">提交</Button>
                    <Button onClick={tiao}>返回</Button>
                </div>
            </div>
        </div>
    );
}

export default StaffAdd;